<template>
  <iLayout>
    <section slot="title">工程列表</section>
    <section slot="operation">
      <el-button type="primary" round icon="el-icon-plus" @click="addProjectClick">新建工程</el-button>
    </section>
    <section slot="right" class="h100 flex_column flex_sb">
      <section class="flex_1">
        <el-table :data="project.data" stripe border>
          <el-table-column label="项目名称" prop="name" width="" fixed=""></el-table-column>
          <el-table-column label="创建人" prop="creatorName" width="" fixed=""></el-table-column>
          <el-table-column label="操作" fixed="right" width="220px">
            <template slot-scope="scope">
              <el-button type="warning" round icon="el-icon-edit" @click="setProjectClick(scope.row)">修改</el-button>
              <el-button type="danger" round icon="el-icon-delete" @click="delProjectClick(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </section>
      <section class="action">
        <el-pagination @current-change="getProjectsList" background :current-page.sync="page.page" :page-size.sync="page.limit" :total.sync="total" layout="total, prev, pager, next"></el-pagination>
      </section>
    </section>

    <!-- 对话框们 -->
    <section>
      <!-- 新建工程对话框 -->
      <el-dialog title="新建工程" :visible.sync="dialog.addProject" width="50%" destroy-on-close>
        <div class="h50vh">
          <ProjectForm ref="addProjectRef" :fromData="addProjectForm"></ProjectForm>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialog.addProject = false">取 消</el-button>
          <el-button type="primary" @click="addProjectFun">确 定</el-button>
        </span>
      </el-dialog>
      <!-- 修改工程对话框 -->
      <el-dialog title="" :visible.sync="dialog.setProject" width="50%" destroy-on-close>
        <div class="h50vh">
          <ProjectForm ref="setProjectRef" :fromData="setProjectForm"></ProjectForm>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialog.setProject = false">取 消</el-button>
          <el-button type="primary" @click="setProjectFun">确 定</el-button>
        </span>
      </el-dialog>
      <!-- 删除工程对话框 -->
      <el-dialog title="" :visible.sync="dialog.delProject" width="30%">
        <div>删除工程吗</div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialog.delProject = false">取 消</el-button>
          <el-button type="primary" @click="delProjectFun">确 定</el-button>
        </span>
      </el-dialog>
    </section>
  </iLayout>
</template>

<script>
import ProjectForm from './formComponent/projectForm.vue'
import * as api from '../../api/private/project'
export default {
  name: 'Project',
  data: () => ({
    page: {
      page: 1,
      limit: 10
    },
    total: 0,
    project: {
      data: []
    },
    addProjectForm: {
      name: '',
      mileageIdentification: '',
      startMileage: '',
      endMileage: '',
      projectManagerId: '',
      entrustingOrg: '',
      monitoringOrg: '',
      supervisingOrg: '',
      basePointList: [],
      remark: ''
    },
    setProjectForm: {
      name: '',
      mileageIdentification: '',
      startMileage: '',
      endMileage: '',
      projectManagerId: '',
      entrustingOrg: '',
      monitoringOrg: '',
      supervisingOrg: '',
      basePointList: [],
      remark: ''
    },
    dialog: {
      addProject: false,
      setProject: false,
      delProject: false
    }
  }),
  components: {
    ProjectForm
  },
  mounted() {
    this.getProjectsList()
  },
  methods: {
    // 为全局组件获取工程列表
    getProjectList2Fun() {
      this.$ebs.$emit('project_created', null)
    },
    // 获取所有工程列表
    async getProjectsList() {
      let req = {
        page: this.page.page,
        limit: this.page.limit
      }
      let res = await api.getProject(req)
      if (res.code == 0) {
        this.project.data = res.data.list
        this.total = res.data.total
      } else {
        this.$msg.error('获取列表失败')
      }
    },

    // 新建工程按下
    addProjectClick() {
      this.dialog.addProject = true
    },
    // 新建工程函数
    async addProjectFun() {
      let bool = this.$refs.addProjectRef.validate()
      if (bool) {
        let req = this.addProjectForm
        let res = await api.addProject(req)
        if (res.code == 0) {
          this.dialog.addProject = false
          this.getProjectsList()
          this.$refs.addProjectRef.resetFields()
          this.getProjectList2Fun()
        } else {
          this.$msg.error('新建工程失败')
        }
      }
    },
    // 修改工程按下
    async setProjectClick(row) {
      const { code, data, msg } = await api.getProjectInfo({ id: row.id })
      if (code === 0) {
        this.dialog.setProject = true
        this.setProjectForm = data
        this.$nextTick(item => {
          this.$refs.setProjectRef.catchArray.PMData = {
            name: row.projectManagerName
          }
        })
      }
    },
    // 修改工程函数
    async setProjectFun() {
      let bool = this.$refs.setProjectRef.validate()
      if (bool) {
        let req = this.setProjectForm
        let res = await api.editProject(req)
        if (res.code == 0) {
          this.dialog.setProject = false
          this.getProjectsList()
        } else {
          this.$msg.error('修改工程失败')
        }
      }
    },
    // 删除工程按下
    delProjectClick(row) {
      this.dialog.delProject = true
      this._catch = row
    },
    // 删除工程函数
    async delProjectFun() {
      let req = [this._catch.id]
      let res = await api.deleteProject(req)
      if (res.code == 0) {
        this.dialog.delProject = false
        this.getProjectsList()
        this.reloadGlobalProjectList()
      } else {
        this.$msg.error('删除工程失败')
      }
    },
    reloadGlobalProjectList() {
      this.$ebs.$emit('reload_project', this._catch)
    }
  }
}
</script>

<style lang="scss" scoped>
.middle {
  width: 100%;
  height: calc(100% - 3rem);
}

.action {
  width: 100%;
  height: 3rem;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
</style>
